<template>
  <div>
    <a-modal
      :visible="visible"
      :title="formState.id? '会议登记':'新增会议信息'"
      :maskClosable="false"
      :closable="true"
      :destroyOnClose="true"
      width="900px"
      :dialog-style="{ margin: '0 auto',top: '25px'}"
      wrapClassName=""
      @cancel="closeVisible"
      >
      <template slot="footer">
          <a-button @click="closeVisible">
              取消
          </a-button>
          <a-button :loading="loading" class="blue-btn" @click="onSubmit(false)">
              保存
          </a-button>
      </template>
      <div>
        <a-form :form="cform" ref="form" class="onSiteInspectionCheck-In-model-form-box">
          <a-descriptions bordered style="width: 100%;">
            <a-descriptions-item :span="4">
                <span slot="label" class="descriptions-label-slot">
                    <span class="xhText" >*</span>
                    会议主题
                </span>
                <a-form-item ref="fhyzt" prop="fhyzt" class="zm-form-model">
                    <div style="width: 100%;text-align: center;font-weight: 600;">
                        <!-- <a-textarea
                            style="width: 100%;"
                            v-model="formState.fhyzt"
                            :autosize="{ minRows: 1, maxRows: 10000 }"
                            placeholder="请输入会议主题"
                            v-decorator="[ 'fhyzt', {initialValue:formState.fhyzt,rules: rules.fhyzt}]"
                        ></a-textarea> -->
                        {{ formState.fhyzt }}
                    </div>
                </a-form-item>
            </a-descriptions-item>
            <a-descriptions-item :span="2">
                <span slot="label" class="descriptions-label-slot">
                    <span class="xhText" >*</span>
                    会议地点
                </span>
                <a-form-item ref="fhydd" prop="fhydd" class="zm-form-model">
                    <div style="width: 100%;">
                        <a-textarea
                            style="width: 100%;"
                            v-model="formState.fhydd"
                            :autosize="{ minRows: 1, maxRows: 10000 }"
                            placeholder="请输入会议地点"
                            v-decorator="[ 'fhydd', {initialValue:formState.fhydd,rules: rules.fhydd}]"
                        ></a-textarea>
                    </div>
                </a-form-item>
            </a-descriptions-item>
            <a-descriptions-item :span="2">
                <span slot="label" class="descriptions-label-slot">
                    <span class="xhText" >*</span>
                    会议时间
                </span>
                <a-form-item ref="fhysj" prop="fhysj" class="zm-form-model">
                    <div style="width: 100%;">
                      <a-date-picker
                        show-time
                        style="width: 100%;"
                        placeholder="请选择会议时间"
                        v-model="formState.fhysj"
                        v-decorator="[ 'fhysj', {initialValue:formState.fhysj,rules: rules.fhysj}]"/>
                    </div>
                </a-form-item>
            </a-descriptions-item>
            <!-- <a-descriptions-item :span="4">
                <span slot="label" class="descriptions-label-slot">
                    签到二维码
                </span>
                <div style="width: 100%;">
                  <a-button class="blue-btn" @click="shareQRCodeClick({fhyzt:formState.fhyzt,id:formState.id,frylx:'企业',fhylx:formState.fhylx,sqsxid:formState.sqsxid})" icon="qrcode">参会人员签到码</a-button>
                </div>
            </a-descriptions-item> -->
          </a-descriptions>
        </a-form>
      </div>
      <div>
        <commpVxeTable
          :key="reCommpVxeTable1"
          :conditionBtnRow="true"
          :config="dataTableConfig"
          :columns="columnsVxe"
          :formItem="[]"
          ref="administrativeOffice"
          >
          <template v-slot:externalOperations="{data}"  >
              <vxe-form-item>
                  <template>
                      <a-button class="blue-btn" @click="success" icon="reload">刷新</a-button>
                  </template>
              </vxe-form-item>
              <!-- <vxe-form-item>
                  <template>
                      <a-button class="blue-btn" @click="allCodeList" icon="unordered-list">签名二维码汇总</a-button>
                  </template>
              </vxe-form-item> -->
              <!-- <vxe-form-item>
                <template>
                      <a-button class="blue-btn" @click="onSubmit" icon="plus">添加参会人员</a-button>
                  </template>
              </vxe-form-item> -->
          </template>
          <template v-slot:operation_fqmfjBtn="{row}" data-desc="签名附件">
            <span v-if="row.fqmfj">
              <img :src="row.fqmfj" alt="签名附件" style="width: 100px;height: 30px;">
            </span>
            <span v-else>
              {{ row.fxm }}
              <!-- <a href="#" @click="shareQRCodeClick({...row,fhyzt:formState.fhyzt,})">在线签名</a> -->
            </span>
          </template>
          <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
              <a-form layout="inline">
                  <!-- <a-form-item>
                      <a-button class="blue-btn" @click="reviseClick(row)" icon="edit">编辑</a-button>
                  </a-form-item> -->
                  <a-form-item>
                      <a-button class="red-btn" @click="deleteClick(row)" icon="delete">删除</a-button>
                  </a-form-item>
                  <a-form-item>
                  </a-form-item>
              </a-form>
          </template>
        </commpVxeTable>
      </div>
    </a-modal>
    <increaseMan ref="increaseManRef" @success="success"></increaseMan>
    <QRQueryResults ref="QRQueryResultsRef" />
    <QRcodeList ref="QRcodeListRef"/>
  </div>
</template>
<script>
import assessCheckApi  from './service/api.js'
import { addSqsxHy,updateSqsxHy,deleteSqsxHymx,querySqsxHymxListByHyId,} from './service/index'
import commpVxeTable   from '@/components/commp-vxe-table/commp-vxe-table.vue'
import moment from 'moment'
import increaseMan  from './increaseMan.vue'
import QRQueryResults from './QRQueryResults'
import QRcodeList from './QRcodeList'
export default {
  components: {
      commpVxeTable,
      increaseMan,
      QRQueryResults,
      QRcodeList
  },
  data() {
    return {
      moment:moment,
      visible: false,
      isView: false,
      loading: false,
      cform:this.$form.createForm(this, { name: 'cform' }),
      formState: {
        sqsxid: ''
      },
      rules:{
        fhyzt: [{
            required: true,
            message: '请输入会议主题',
            trigger: 'blur',
        }],
        fhysj: [{
            type: 'object',
            required: true,
            message: '请选择会议时间',
            trigger: 'blur',
        }],
        fhydd: [{
          required: true,
          message: '请输入会议地点',
          trigger: 'blur',
        }],
      },
      reCommpVxeTable1: '',
      dataTableConfig: {
          api: assessCheckApi.querySqsxHymxListByHyId,
          rowId: 'id',
          height:window.innerHeight - 360,
          autoHidden:true,
          pageSize:100000,
          paramet: {
            id: '',
          }
      },
      columnsVxe: [
          {
              title: '人员类型',
              field: 'frylx',
              width: 100,
          },{
              title: '部门',
              field: 'fbm',
          },{
              title: '职务',
              field: 'fzw',
              width: 100,
          },{
              title: '审评身份',
              field: 'fjcsf',
              width: 100,
          }
          ,{
              title: '签到时间',
              field: 'createTime',
              width: 170,
          },{
              title: '签名附件',
              field: 'fqmfj',
              width: 150,
              slots: {
              // 使用插槽模板渲染
                  default: 'operation_fqmfjBtn',
              },
          },{
              title: '操作',
              field: 'jobid',
              width: 100,
              slots: {
              // 使用插槽模板渲染
                  default: 'operation_btn',
              },
          }
      ],
    }
  },
  methods: {
    getData(val,isview){
      this.isView = isview
      if(val.id){
        this.formState = val
        this.formState.fhysj = moment(val.fhysj)
        this.dataTableConfig.paramet.id = val.id
      } else {
        this.formState = val
        this.dataTableConfig.paramet.id = ''
      }
      // this.reCommpVxeTable1 = Date.now
      //console.log('打开弹窗',this.formState)
    },
    closeVisible(){
      this.visible = false
      this.$emit('success')
    },
    onSubmit(visib){
      this.cform.validateFields((err, values) => {
          if (!err) {
            //console.log(values)
              let data = this.formState
              data.fhysj = moment(data.fhysj).format('YYYY-MM-DD HH:mm:ss')
              //console.log(data)
              this.loading = true
              if(this.formState.id){
                // if(!visib){
                //   this.loading = true
                // }
                  updateSqsxHy(data).then(res => {
                      if(res.code == 200){
                          // if(!visib){
                            this.$message.success(res.message)
                            this.dataTableConfig.paramet.id = res.result
                            this.reCommpVxeTable1 = Date.now()
                            this.$emit('success')
                            this.visible = false
                          //   return
                          // }
                          // this.addClick({fhyid:res.result},false)
                      } else {
                          this.$message.warning(res.message)
                      }
                      this.loading = false
                  })
              } else {
                // if(!visib){
                //   this.loading = true
                // }
                  addSqsxHy(data).then(res => {
                      if(res.code == 200){
                            this.$message.success(res.message)
                            this.dataTableConfig.paramet.id = res.result
                            this.reCommpVxeTable1 = Date.now()
                            this.$emit('success')
                            this.visible = false
                          // this.addClick({fhyid:res.result},false)
                      } else {
                          this.$message.warning(res.message)
                      }
                      this.loading = false
                  })
              }
          } else {
              //console.log('error submit!!');
              return false;
          }
      });
    },
    addClick(val,isview){
      this.$nextTick(_ => {
          this.$refs.increaseManRef.increaseManVisible = true
          this.$refs.increaseManRef.getData(val,isview)
      })
    },
    // 编辑人员
    reviseClick(row){
      this.addClick(row,false)
    },
    // 删除人员
    deleteClick(row){
      var that = this
      that.$confirm({
        title: '您确定要删除当前参会人员吗?',
        content: '',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          deleteSqsxHymx({ids:row.id}).then(res => {
            if(res.code == 200){
              that.reCommpVxeTable1 = Date.now()
              that.$message.success(res.message)
            } else {
              that.$message.warning(res.message)
            }
          })
        },
        onCancel() {
          //console.log('Cancel');
        },
      });
    },
    //签名二维码
    shareQRCodeClick(val){
        this.cform.validateFields((err, values) => {
          if (!err) {
            //console.log(values)
              let data = this.formState
              data.fhysj = moment(data.fhysj).format('YYYY-MM-DD')
              //console.log(data)
              if(this.formState.id){
                  updateSqsxHy(data).then(res => {
                      if(res.code == 200){
                        this.$refs.QRQueryResultsRef.visibleQRQrCode = true
                        this.$refs.QRQueryResultsRef.getData(val)
                      } else {
                          this.$message.warning(res.message)
                      }
                  })
              } else {
                  addSqsxHy(data).then(res => {
                      if(res.code == 200){
                        this.formState.id = res.result
                        this.dataTableConfig.paramet.id = res.result
                        this.success()
                        this.$refs.QRQueryResultsRef.visibleQRQrCode = true
                        this.$refs.QRQueryResultsRef.getData({fhyzt:this.formState.fhyzt,id:res.result})
                      } else {
                          this.$message.warning(res.message)
                      }
                  })
              }
          } else {
              //console.log('error submit!!');
              return false;
          }
      });
    },
    // 签名二维码汇总
    allCodeList(){
      querySqsxHymxListByHyId({id:this.formState.id}).then(res => {
        if(res.code == 200){
          let codeList = []
          codeList = res.result.records
          //console.log('codeList',codeList)
          this.$refs.QRcodeListRef.visibleQRQrCode = true
          this.$refs.QRcodeListRef.getData(codeList,this.formState.fhyzt)
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    success(){
      // 刷新表格
      this.reCommpVxeTable1 = Date.now()
    }
  },
}
</script>
<style lang="less">
.onSiteInspectionCheck-In-model-form-box {
  padding: 0 15px;
        .ant-descriptions-bordered .ant-descriptions-item-label{
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);
            background-color:#e6f7ff;
            width: 88px !important;
            text-align: right;
            font-family:simHei !important;
        }
        .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
            padding: 5px 10px !important;
            .ant-form-item {
              margin-bottom: 0 !important;
            }
        }
        .descriptions-label-slot{
            display: flex;
            align-items: center;
            width: 95px !important;//确保左侧固定文字不会换行
            justify-content: flex-end;
        }
        .xhText{
            display: inline-block;
            color: #f5222d;
            line-height: 31px;
            padding-right: 2px;
            font-size: 14px;
            font-weight: 600;
            height: 30px;
        }
        .descriptions-item-center{

        }
        .ant-form-inline .ant-form-item-with-help{
            margin-bottom: 0px !important;
        }
        .zm-form-model{
            display: flex;
            .ant-form-item-control-wrapper{
                flex: 1;
            }
        }
        .ant-form-item-control-wrapper{
            font-family:仿宋_GB2312 !important;
        }
        .ant-descriptions-bordered .ant-descriptions-row{
            border-bottom: 1px solid #e4e3e3;
        }
        .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
            border-right: 1px solid #e4e3e3;
        }
        .ant-descriptions-bordered .ant-descriptions-view{
            border: 1px solid #e4e3e3;
            border-right: 0;
        }
        .ant-descriptions-row:last-child{
            border-bottom: 0;
        }

}
</style>
